<template>
  <view class="qs-container">
    <!-- 分类标签 -->
    <view class="category-tabs">
      <view v-for="(category, index) in categories" :key="index" class="category-item"
            :class="[activeCategory === index ? 'active' : '']" @click="switchCategory(index)">
        <text class="category-text">{{ category.name }}</text>
      </view>
    </view>

    <!-- 题库列表 -->
    <scroll-view class="qs-list" scroll-y="true" @refresherrefresh="onRefresh"
                 @scrolltolower="loadMore">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 无权限状态 -->
      <view v-else-if="!hasPermission" class="no-permission-state">
        <image src="/static/image/no_permission.png" class="permission-illustration" mode="aspectFit"></image>

        <view class="permission-text">
          <text class="permission-title">没有权限</text>
          <text class="permission-desc">可以通过邀请好友可解锁权限</text>
        </view>

        <view class="invite-btn" @click="inviteFriends">
          <text class="invite-text">立即邀请</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else-if="questionList.length === 0" class="empty-state">
        <image src="/static/image/empty_order.png" class="empty-icon" mode="aspectFit"></image>
        <text class="empty-text">暂无错题集</text>
      </view>

      <!-- 题库列表 -->
      <view v-else class="qs-list-container">
        <view v-for="(question, index) in questionList" :key="question.id" class="qs-item" @click="viewQuestionDetail(question)">
          <view class="qs-bg"></view>
          <view class="qs-shadow"></view>
          <!-- 题库标题 -->
          <view class="question-title">
            <text class="title-text">{{ question.questionBank.title }}</text>
          </view>

          <!-- 题库信息 -->
          <view class="question-info">
            <!-- 难度评分 -->
            <view class="difficulty-rating">
              <image src="/static/qs/icon_like_active.png" class="star-icon" mode="aspectFit"></image>
              <text class="difficulty-text">难度: {{ question.questionBank.difficulty }}</text>
            </view>

            <!-- 状态指示器 -->
            <view class="status-indicator" :class="[getStatusClass(question.status)]">
              <text class="status-text">{{ getStatusText(question.status) }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="hasMore && hasPermission" class="load-more" @click="loadMore">
        <text class="load-more-text">加载更多</text>
      </view>
      <view v-else-if="!hasMore && hasPermission" class="no-more">
        <text class="no-more-text">没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeCategory: 0,
      hasMore: false,
      loading: false,
      hasPermission: true, // 是否有权限
      currentPage: 1,
      categories: [
        {
          name: '真题百炼',
          value: 0,
        },
        {
          name: '模块专练',
          type: 1
        }
      ],
      questionList: [
      ]
    }
  },
  methods: {
    getPage() {
      const params = {
        user_id: this.userInfo.id,
        pageNo: this.currentPage,
        pageSize: 10,
        type: this.categories[this.activeCategory].type
      };
      this.loading = true
      this.$api.getPracticePage(params).then(res => {
        uni.hideLoading();
        if (res && res.list) {
          this.questionList = [];
          if (this.currentPage === 1) {
            this.questionList = res.list;
          } else {
            this.questionList = this.questionList.concat(res.list);
          }
          console.log(this.questionList)
          this.hasMore = this.questionList.length < res.total;
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换分类
    switchCategory(index) {
      this.activeCategory = index;
      uni.showLoading({
        title: '加载中...'
      });

      // 重置页码
      this.currentPage = 1;
      this.getPage()
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '1': '已完成',
        '0': '进行中'
      };
      return statusMap[status] || '未知状态';
    },

    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        '1': 'status-completed',
        '0': 'status-in-progress'
      };
      return classMap[status] || 'status-unknown';
    },

    // 刷新题库状态
    refreshQuestionStatus(questionId, newStatus) {
      const questionIndex = this.questionList.findIndex(question => question.id === questionId);
      if (questionIndex !== -1) {
        this.questionList[questionIndex].status = newStatus;
      }
    },

    // 下拉刷新
    onRefresh() {
      uni.showLoading({
        title: '刷新中...'
      });

      // 重新加载订单列表
      this.loadOrderList();
    },

    // 加载更多
    loadMore() {
      if (!this.hasMore || this.loading) return;

      this.loading = true;
      uni.showLoading({
        title: '加载中...'
      });

      // 计算下一页
      this.currentPage += 1;
      this.getPage()
    },

    // 初始化数据
    initData() {
      this.loading = true;
      uni.showLoading({
        title: '加载中...'
      });

      // 调用API获取题库列表
      this.loadQuestionList();
    },

    // 加载题库列表
    loadQuestionList() {
      // 重置页码
      this.currentPage = 1;
      this.getPage()
    },

    // 查看题库详情
    viewQuestionDetail(question) {
      uni.navigateTo({
        url: `/pages/question/result?practiceId=${question.id}`
      });
    },

    // 邀请好友
    inviteFriends() {
      // 检查用户信息
      if (!this.userInfo || !this.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }

      // 显示分享菜单
      uni.showActionSheet({
        itemList: ['分享给好友', '分享到朋友圈'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 分享给好友
            this.shareToFriend();
          } else if (res.tapIndex === 1) {
            // 分享到朋友圈
            this.shareToTimeline();
          }
        },
        fail: (err) => {
          console.error('显示分享菜单失败:', err);
        }
      });
    },

    // 分享给好友
    shareToFriend() {
      // 触发微信分享给好友
      // 这里会调用 onShareAppMessage 方法
      uni.showToast({
        title: '请点击右上角分享',
        icon: 'none',
        duration: 2000
      });
    },

    // 分享到朋友圈
    shareToTimeline() {
      // 触发微信分享到朋友圈
      // 这里会调用 onShareTimeline 方法
      uni.showToast({
        title: '请点击右上角分享到朋友圈',
        icon: 'none',
        duration: 2000
      });
    }
  },
  onLoad() {

    this.initData();
    // this.getSystemInfo();
  },

  // 微信分享配置
  onShareAppMessage() {
    if (!this.userInfo || !this.userInfo.id) {
      return {
        title: '邀请好友解锁题库权限',
        path: '/pages/invite/invite'
      };
    }

    return {
      title: '邀请好友解锁题库权限',
      desc: '邀请好友注册，即可解锁更多题库权限，一起学习进步！',
      path: `/pages/invite/invite?user_id=${this.userInfo.id}&source=qs`,
      imageUrl: '/static/image/share_cover.png'
    };
  },

  onShareTimeline() {
    if (!this.userInfo || !this.userInfo.id) {
      return {
        title: '邀请好友解锁题库权限',
        path: '/pages/invite/invite'
      };
    }

    return {
      title: '邀请好友解锁题库权限',
      desc: '邀请好友注册，即可解锁更多题库权限，一起学习进步！',
      path: `/pages/invite/invite?user_id=${this.userInfo.id}&source=qs`,
      imageUrl: '/static/image/share_cover.png'
    };
  }
}
</script>

<style lang="scss">
.qs-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

// 顶部搜索栏
.header {
  //position: fixed;
  //top: 0;
  //left: 0;
  //right: 0;
  //z-index: 1000;
  background-color: #fff;
  //padding-right: 140rpx;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32rpx;
  }

  .search-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-right: 20rpx;

    .search-box {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      bqs-radius: 50rpx;
      padding: 0 24rpx;
      height: 72rpx;
      border: 2rpx solid #A6A6A6;
      position: relative;

      .search-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }

      .search-input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }

      .search-placeholder {
        color: #999;
      }
    }

    .search-btn {
      color: #333;

      .search-btn-text {
        font-size: 28rpx;
      }

      &:active {
        background-color: #555;
      }
    }
  }
}

// 分类标签
.category-tabs {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #fff;
  gap: 40rpx;
  bqs-bottom: 2rpx solid #f0f0f0;
  overflow-x: auto;

  .category-item {
    flex-shrink: 0;
    position: relative;
    padding-bottom: 16rpx;

    .category-text {
      font-size: 28rpx;
      color: #666;
      font-weight: 400;
    }

    &.active {
      .category-text {
        color: #333;
        font-weight: 500;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4rpx;
        background-color: #539DF3;
        bqs-radius: 2rpx;
      }
    }

    &:active {
      opacity: 0.7;
    }
  }
}

// 订单列表
.qs-list {
  flex-grow: 1;
  padding-top: 24rpx;
  width: 100%;
  box-sizing: bqs-box;
}

// 加载状态
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 32rpx;

  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 无权限状态
.no-permission-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  border-radius: 16rpx;
  margin: 24rpx 32rpx;

  .permission-illustration {
    position: relative;
    width: 480rpx;
    height: 480rpx;
  }

  .permission-text {
    text-align: center;
    margin-bottom: 40rpx;

    .permission-title {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 16rpx;
      display: block;
    }

    .permission-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.4;
      display: block;
    }
  }

  .invite-btn {
    width: 280rpx;
    height: 70rpx;
    background: #539DF3;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .invite-text {
      font-size: 32rpx;
      color: #fff;
      font-weight: bold;
    }

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 12rpx rgba(83, 157, 243, 0.3);
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 32rpx;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 32rpx;
    opacity: 0.6;
  }

  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 16rpx;
  }

  .empty-desc {
    font-size: 26rpx;
    color: #ccc;
  }
}

.qs-list-container {
  padding: 0 32rpx;
}

.qs-item {
  //background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 32rpx;
  overflow: hidden;
  position: relative;
  .qs-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: #fff;
  }
  .qs-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(83, 157, 243, 0) 0%, rgba(83, 157, 243, 0.3) 100%);
  }
}

// 题库标题
.question-title {
  margin-bottom: 24rpx;
  position: relative;
  z-index: 3;

  .title-text {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    line-height: 1.4;
    display: block;
  }
}

// 题库信息
.question-info {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .difficulty-rating {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;

    .star-icon {
      width: 24rpx;
      height: 24rpx;
      margin-right: 8rpx;
    }

    .difficulty-text {
      font-size: 24rpx;
      color: #666;
    }
  }

  .status-indicator {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;

    &.status-incomplete {
      background-color: #e3f2fd;
      color: #2196f3;
    }

    &.status-completed {
      background-color: #e8f5e8;
      color: #4caf50;
    }

    &.status-in-progress {
      background-color: #fff3e0;
      color: #ff9800;
    }

    .status-text {
      font-weight: 500;
    }
  }
}

// 加载更多
.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  margin: 40rpx 0;

  .load-more-text {
    font-size: 28rpx;
    color: #666;
  }

  &:active {
    opacity: 0.7;
  }
}

.no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  margin: 40rpx 0;

  .no-more-text {
    font-size: 24rpx;
    color: #ccc;
  }
}
</style>
